<template>
	<view>
		 
		<view class="status_bar" :style="{height: statusBarHeight}">
			<!-- 这里是状态栏 -->
		</view>
		<view class="video" :style="{height: pageHeight}">
			<view class="videoHeader" :style="{height: navHeight}">
				<view class="iconfont icon-fenlei1"></view>
				<view class="fenlei" :style="{height: navHeight}">
					<text class="current">分类</text>
					<text>测试</text>
				</view>
			</view>
			<douyin-video :list="videos"></douyin-video>
		</view>

	</view>
</template>

<script>
	const videos = require('@/common/video/video.json').video;
	export default {
		data() {
			return {
				videos: [],
				statusBarHeight: "",
				pageHeight: "",
				navHeight: ""
			}
		},
		components: {
			
		},
		onLoad() {
			this.videos = videos;
			const res = uni.getSystemInfoSync();
			// 状态栏高度
			getApp().globalData.statusBar = res.statusBarHeight
			this.statusBarHeight = res.statusBarHeight + "px"
			this.pageHeight = "calc(100vh - "+this.statusBarHeight + ")"
			
			// 胶囊高度
			let jnHeight = wx.getMenuButtonBoundingClientRect().height
			// 胶囊top
			let jnTop = wx.getMenuButtonBoundingClientRect().top
			
			// 状态栏高度
			console.log("状态栏"+getApp().globalData.statusBar);
			
			// 导航栏高度 = 胶囊高度 + 外边距*2
			this.navHeight = jnHeight + (jnTop - getApp().globalData.statusBar)*2 + "px"
			getApp().globalData.navHeight = jnHeight + (jnTop - getApp().globalData.statusBar)*2
			console.log("导航栏"+getApp().globalData.navHeight);
			
		},
		methods: {
			
		},
		onShow() {

			uni.setTabBarItem({
				index: 2,
				selectedIconPath: '/static/tabBar/video-white.png'
			})

			uni.setTabBarStyle({
				selectedColor: '#ffffff',
				backgroundColor: '#000000',
				borderStyle: 'black'
			})
		},
		onHide() {
			uni.setTabBarStyle({
				selectedColor: '#151824',
				backgroundColor: '#ffffff',
			})
		}
	}
</script>

<style lang="scss" scoped>
	// 状态栏
	.status_bar {
		width: 100%;
		background-color: #000000;
	}

	.video {
		position: relative;
		width: 100vw;
		height: calc(100vh - 37px);
		.videoHeader {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 44px;
			z-index: 2;
			color: #fff;
			.iconfont {
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 60rpx;
				color: #fff;
			}
			.fenlei {
				display: flex;
				justify-content: center;
				align-items: center;
				text {
					padding: 0 30rpx;
					color: #999999;
					font-weight: 800;
				}
				.current {
					color: #ffffff;
				}
			}
		}
	}
</style>
